<template>
  <div class="centerRight2">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <i class="iconfont icon-vector" />
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2 title-size">场地实时人数</span>
        </div>
      </div>
      <el-row style="height: 50px;line-height: 50px;">
        <el-col :span="6" style="text-align: center">场地</el-col>
        <el-col :span="6" style="text-align: center">当前人数</el-col>
        <el-col :span="6" style="text-align: center">地址</el-col>
        <el-col :span="6" style="text-align: center">更新时间</el-col>
      </el-row>
      <div class="d-flex mt-1 jc-center body-box " >
<!--        <dv-scroll-board class="dv-scr-board" :config="config" ref="scrollBoardRef"/>-->

<!--        <vue3-seamless-scroll-->
<!--          :list="list"-->
<!--          class="scroll-wrap"-->
<!--        >-->
        <el-scrollbar class="scroll-wrap">
          <swiper
            :slidesPerView="1"
            :spaceBetween="30"
            :loop="true"
            :centeredSlides="true"
            :direction="'vertical'"
            :autoplay="{ delay: 2000, disableOnInteraction: false }"
          >
                <el-row v-for="(item, i) of list" v-show="list && list.length > 0" :key="i" :class="[i%2 ===0 ? 'o-bg' : '']" style="width: 100%;">
                  <el-col :span="6" class="center">
                    <div class="scroll-item">{{ item.venueName }}</div>
                  </el-col>
                  <el-col :span="6" class="center">
                    <div class="scroll-item">{{ item.num }}</div>
                  </el-col>
                  <el-col :span="6" class="center">
<!--                    <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="item.address"
                    placement="top"
                  >-->
                    <div class="scroll-item overflow-content" :title="item.address">{{ item.address }}</div>
<!--                      </el-tooltip>-->
                  </el-col>
                  <el-col :span="6" class="center">
                    <div class="scroll-item">{{ item.timestamp_ }}</div>
                  </el-col>
                </el-row>
            <div v-if="!list || list.length == 0"
                 style="width: 100%;height: 100px;display: flex;justify-content: center;align-items: center;color: white;font-size: 18px;">
              暂无记录</div>
<!--            <swiper-slide><img src="@/assets/images/swiper2.png" alt="" /></swiper-slide>-->
          </swiper>
        </el-scrollbar>
<!--        <FScrollText type="info" :speed="30" direction="up" style="height:360px;margin-top:10px;">
          <div v-if="list && list.length > 0">
            <el-row v-for="(item, i) of list" :key="i" style="width: 100%;">
              <el-col :span="6" class="center">
                <div class="scroll-item">{{ item.venueName }}</div>
              </el-col>
              <el-col :span="6" class="center">
                <div class="scroll-item">{{ item.num }}</div>
              </el-col>
              <el-col :span="6" class="center">
                <div class="scroll-item">{{ item.address }}</div>
              </el-col>
              <el-col :span="6" class="center">
                <div class="scroll-item">{{ item.timestamp_ }}</div>
              </el-col>
            </el-row>
          </div>
          <div v-if="!list || list.length == 0"
               style="width: 100%;height: 100px;display: flex;justify-content: center;align-items: center;color: white;font-size: 18px;">
            暂无记录</div>
        </FScrollText>-->
<!--        </vue3-seamless-scroll>-->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive,onMounted,ref } from 'vue'
// import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { Swiper, SwiperSlide } from 'swiper/vue' // swiper 所需组件
import  Autoplay from 'swiper'
// import { Autoplay, Navigation, Pagination } from 'swiper'// 分页器
import 'swiper/swiper-bundle.css'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

const list = ref()

// const classOptions = {
//   step: 1
// };
// const modules = [Autoplay, Pagination, Navigation, A11y]
const modules = [Autoplay]
const setData = (data : never) => {
  console.log('scroll_setData',data);
  list.value = data
  console.log('scroll_setData_list',list.value)
}

defineExpose({setData})
</script>

<style lang="scss" scoped>
//$box-height: 410px;
$box-width: 100%;
.centerRight2 {
  padding: 16px;
  padding-top: 20px;
  //height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    //height: $box-height - 30px;
    border-radius: 10px;
  }
  .title-size{
    font-size: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    .dv-scr-board {
      width: 100%;
      height: 420px;
      padding: 5px 0;
    }
  }
}
.demo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.scroll-wrap {
  height:360px;
  width: 900px;
  margin: 0 auto;
  //overflow-y: scroll;
}
.scroll-item {
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.overflow-content{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.o-bg{
  background-color: #1e3f70
}
</style>
